<template>
  <div class="app-container">
    <div class="filter-container">
      <el-input v-model="listQuery.brokerNickName" placeholder="经纪人昵称" style="width: 200px;" class="filter-item" @keyup.enter.native="handleFilter" />
      <el-input v-model="listQuery.brokerQQ" placeholder="QQ" style="width: 200px;" class="filter-item" @keyup.enter.native="handleFilter" />
      <el-input v-model="listQuery.brokerWechat" placeholder="微信" style="width: 200px;" class="filter-item" @keyup.enter.native="handleFilter" />
      <el-input v-model="listQuery.brokerPhone" placeholder="联系电话" style="width: 200px;" class="filter-item" @keyup.enter.native="handleFilter" />
      <el-button v-waves class="filter-item" type="primary" icon="el-icon-search" @click="handleFilter">{{ $t('table.search') }}</el-button>
      <el-button class="filter-item" style="margin-left: 10px;" type="primary" icon="el-icon-edit" @click="handleCreate">{{ $t('table.add') }}</el-button>
    </div>
    <el-table v-loading="listLoading" :key="tableKey" :data="list" border fit highlight-current-row style="width: 100%;">
      <el-table-column label="编号" type="index" align="center" width="60"/>
      <el-table-column label="经纪人昵称" prop="brokerNickName" align="center"/>
      <el-table-column :formatter="formatSex" label="性别" prop="brokerSex" align="center" width="60"/>
      <el-table-column label="QQ" prop="brokerQQ" align="center"/>
      <el-table-column label="微信" prop="brokerWechat" align="center"/>
      <el-table-column label="联系电话" prop="brokerPhone" align="center"/>
      <el-table-column label="添加日期" align="center">
        <template slot-scope="scope">
          <span>{{ scope.row.createdAt | parseTime('{y}-{m}-{d} {h}:{i}') }}</span>
        </template>
      </el-table-column>
      <el-table-column label="账号" prop="sys_users[0].userLoginName" align="center"/>
      <el-table-column label="密码" prop="sys_users[0].userLoginPwd" align="center"/>
      <el-table-column label="操作" align="center" width="230" class-name="small-padding fixed-width">
        <template slot-scope="scope">
          <el-button type="primary" size="mini" @click="handleUpdate(scope.row)">重置</el-button>
          <el-button size="mini" type="danger" @click="handleDelete(scope.row)">{{ $t('table.delete') }}
          </el-button>
        </template>
      </el-table-column>
    </el-table>
    <pagination :total="total" :page.sync="listQuery.pageNum" :limit.sync="listQuery.pageSize" @pagination="getList" />
    <el-dialog :title="textMap[dialogStatus]" :visible.sync="dialogFormVisible">
      <el-form ref="dataForm" :rules="rules" :model="temp" label-position="right" label-width="100px" style="width: 400px; margin-left:50px;">
        <el-form-item label="经纪人昵称" prop="brokerNickName">
          <el-input v-model="temp.brokerNickName" />
        </el-form-item>
        <el-form-item label="微信" prop="brokerWechat">
          <el-input v-model="temp.brokerWechat" />
        </el-form-item>
        <el-form-item label="QQ" prop="brokerQQ">
          <el-input v-model="temp.brokerQQ" />
        </el-form-item>
        <el-form-item label="手机号" prop="brokerPhone">
          <el-input v-model="temp.brokerPhone" />
        </el-form-item>
        <el-form-item label="性别" prop="brokerSex">
          <template>
            <el-radio v-model="temp.brokerSex" label="0">男</el-radio>
            <el-radio v-model="temp.brokerSex" label="1">女</el-radio>
          </template>
        </el-form-item>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button @click="dialogFormVisible = false">{{ $t('table.cancel') }}</el-button>
        <el-button type="primary" @click="createData()">{{ $t('table.confirm') }}</el-button>
      </div>
    </el-dialog>
  </div>
</template>

<script>
import {
	fetchAgentListAjax,
	addAgentAjax,
	delAgentAjax
} from "@/api/agentList";
import {
	resetPwd
} from "@/api/shop";
import waves from "@/directive/waves"; // Waves directive
// import { parseTime } from "@/utils";
import Pagination from "@/components/Pagination"; // Secondary package based on el-pagination

export default {
	name: "ComplexTable",
	components: { Pagination },
	directives: { waves },
	filters: {},
	data() {
		return {
			tableKey: 0,
			list: [],
			total: 0,
			listLoading: true,
			listQuery: {
				pageNum: 1,
				pageSize: 10
			},
			temp: {
				id: undefined,
				name: "",
				wechat: "",
				qq: "",
				phone: "",
				sex: "",
				store_id: 0
			},
			dialogFormVisible: false,
			dialogStatus: "",
			textMap: {
				create: "新增经济人"
			},
			dialogPvVisible: false,
			rules: {
				brokerNickName: [
					{
						required: true,
						message: "必填",
						trigger: "change"
					}
				],
				brokerWechat: [
					{
						required: true,
						message: "必填",
						trigger: "change"
					}
				],
				brokerQQ: [
					{
						required: true,
						message: "必填",
						trigger: "change"
					}
				],
				brokerPhone: [
					{
						required: true,
						message: "必填",
						trigger: "blur"
					}
				],
				brokerSex: [
					{
						required: true,
						message: "必选",
						trigger: "blur"
					}
				]
			},
			downloadLoading: false
		};
	},
	created() {
		this.getList();
	},
	methods: {
		async getList() {
			this.listLoading = true;
			try {
				const result = await fetchAgentListAjax(this.listQuery);
				if (result.data.code === 0) {
					this.list = result.data.data.pageData;
					this.total = result.data.data.maxCount;
				}
				this.listLoading = false;
			} catch (err) {
				console.log(err);
				this.listLoading = false;
			}
		},

		handleFilter() {
			this.listQuery.pageNum = 1;
			this.getList();
		},

		formatSex(row) {
			return row.brokerSex === 0 ? "男" : "女";
		},

		resetTemp() {
			this.temp = {
				id: undefined,
				importance: 1,
				remark: "",
				timestamp: new Date(),
				title: "",
				status: "published",
				type: "",
				store_id: 0
			};
		},

		handleCreate() {
			this.resetTemp();
			this.dialogStatus = "create";
			this.dialogFormVisible = true;
			this.$nextTick(() => {
				this.$refs["dataForm"].clearValidate();
			});
		},

		createData() {
			this.$refs["dataForm"].validate(valid => {
				if (valid) {
					this.createDataAjax();
				}
			});
		},

		async createDataAjax() {
			this.listLoading = true;
			try {
				await addAgentAjax(this.temp);
				this.handleFilter();
				this.dialogFormVisible = false;
				this.$notify({
					title: "成功",
					message: "创建成功",
					type: "success",
					duration: 2000
				});
			} catch (err) {
				console.log(err);
				this.listLoading = false;
			}
		},

		handleUpdate(row) {
			this.$confirm("将重置密码为原始密码, 是否继续?", "提示", {
				confirmButtonText: "确定",
				cancelButtonText: "取消",
				type: "warning"
			}).then(() => {
				this.handleResetAjax(row)
			}).catch(() => {
				return
			});
		},

		async handleResetAjax(row) {
			let res = await resetPwd({
				id: row.sys_users[0].id
			});
			if(res.data.code == 0) {
				row.sys_users[0].userLoginPwd = row.sys_users[0].userLoginName;
				this.$notify({
					title: "成功",
					message: "重置成功",
					type: "success",
					duration: 2000
				});
			}
		},

		handleDelete(row) {
			this.$confirm("此操作将永久删除该数据, 是否继续?", "提示", {
				confirmButtonText: "确定",
				cancelButtonText: "取消",
				type: "warning"
			}).then(() => {
				this.handleDeleteAjax(row.id);
			}).catch(() => {
				return;
			});
		},

		async handleDeleteAjax(id) {
			this.listLoading = true;
			try {
				const request = {
					id: id
				};
				await delAgentAjax(request);
				this.handleFilter();
				this.listLoading = false;
				this.$message({
					type: "success",
					message: "删除成功!"
				});
			} catch (err) {
				console.log(err);
				this.listLoading = false;
			}
		}
	}
};
</script>
